<template>
    <div class="bili-mini-mask" v-if="$store.state.loginView">
        <div class="bili-mini-content-wp">
            <div class="bili-mini-close-icon" @click="$store.state.loginView=false"><Icon type="md-close" size="30"/></div>
            <Tabs value="login">
                <!-- 登录 -->
                <TabPane label="登录" name="name1">
                    <Login @on-submit="login">
                        <UserName name="username" />
                        <Password name="password" />
                        <Submit />
                    </Login>
                </TabPane>
                <!-- 注册 -->
                <TabPane label="注册" name="name2">
                    <div class="demo-register">
                        <Login ref="form" @on-submit="register">
                            <UserName name="usernameReg" :rules="usernameRule"/>
                            <Poptip trigger="focus" placement="right" width="240">
                                <Password name="passwordReg" :rules="passwordRule" placeholder="至少6位密码，区分大小写" @on-change="handleChangePassword" />
                                <template #content>
                                <div class="demo-register-tip">
                                    <div class="demo-register-tip-title" :class="passwordTip.class">
                                        强度：{{ passwordTip.strong }}
                                    </div>
                                    <Progress :percent="passwordTip.percent" hide-info :stroke-width="6" :stroke-color="passwordTip.color" />
                                    <div class="demo-register-tip-desc">
                                        请至少输入 6 个字符。请不要使用容易被猜到的密码。
                                    </div>
                                </div>
                                </template>
                            </Poptip>
                            <Password name="passwordConfirm" :rules="passwordConfirmRule" placeholder="确认密码" />
                            <Submit>注册</Submit>
                        </Login>
                    </div>                  
                </TabPane>
            </Tabs>
            <div v-show="isError" class="error" :class="isLoginError?'login-error':'register-error'">{{ message }}</div>             
        </div>   
    </div>


</template>

<script>

    export default {
        name: 'LogReg',
        components: {},
        data () {
            const validatePassCheck = (rule, value, callback) => {
                if (value !== this.$refs.form.formValidate.passwordReg) {
                    callback(new Error('两次输入的密码不匹配！'));
                } else {
                    callback();
                }
            };

            return {
                isError:false,     
                isLogView:true, 
                isLoginError:true,
                message:'',
                usernameRule:[
                    {
                        required: true, message: '密码不能为空！', trigger: 'change'
                    },
                    {
                        min: 6, message: '用户名不能少于6位！', trigger: 'change'
                    },
                    {
                        max:40, message: '用户名不能多于40位！', trigger: 'change'
                    }
                ],
                passwordRule: [
                    {
                        required: true, message: '密码不能为空！', trigger: 'change'
                    },
                    {
                        min: 6, message: '密码不能少于6位！', trigger: 'change'
                    },
                    {
                        max:20, message: '密码不能多于20位！', trigger: 'change'
                    }
                ],
                passwordConfirmRule: [
                    {
                        required: true, message: '确认密码不能为空！', trigger: 'change'
                    },
                    { validator: validatePassCheck, trigger: 'change' }
                ],
                // 密码长度，在密码强度提示时作为判断依据
                passwordLen: 0
            }
        },
        computed: {
            // 密码强度提示文案等
            passwordTip () {
                let strong = '强';
                let className = 'strong';
                let percent = this.passwordLen > 10 ? 10 : this.passwordLen;
                let color = '#19be6b';

                if (this.passwordLen < 6) {
                    strong = '太短';
                    className = 'low';
                    color = '#ed4014';
                } else if (this.passwordLen < 10) {
                    strong = '中';
                    className = 'medium';
                    color = '#ff9900';
                }

                return {
                    strong,
                    class: 'demo-register-tip-' + this.passwordLen < 6 ? 'low' : (this.passwordLen < 10 ? 'medium' : 'strong'),
                    percent: percent * 10,
                    color
                }
            }
        },
        created: function () {
        },
        methods: {
            handleChangePassword (val) {
                this.passwordLen = val.length;
            },            
            async login (valid, { username, password }) {
                if (valid) {
                    let userInfo=new Object()
                    let res=await this.$api.post('users/login',{username:username,password:password})
                    if(res.code==10000){
                            this.isError=false
                            this.isLogView=false
                            userInfo=res.data
                            sessionStorage.setItem('token', res.data.token)     
                            sessionStorage.setItem('userInfo',JSON.stringify(userInfo))                                          
                    }else{
                        this.isError=true
                        this.isLogView=true
                        this.isLoginError=true
                        sessionStorage.removeItem('token')
                        this.message='用户名或密码错误，请重新输入'
                        let timer=setTimeout(()=>{
                            this.isError=false
                            clearTimeout(timer)
                        },2000)
                    }
                    this.$store.commit('changeLogin')
                    this.$store.commit('changeLoginView',this.isLogView)
                    this.$store.commit('getUser',userInfo)
                }
            },

            async register(valid,{usernameReg,passwordReg}) {
                if(valid){
                    let res=await this.$api.post('users/register',{username:usernameReg,password:passwordReg})
                    console.log(res);
                    if(res.code==10000){
                        alert('注册成功')
                        this.isError=false
                    }else if(res.code==102){
                        this.isError=true
                        this.isLoginError=false
                        this.message='该用户名已被注册'
                        let timer=setTimeout(()=>{
                            this.isError=false
                            clearTimeout(timer)
                        },2000)                                                
                    }else{
                        this.isError=true
                        this.isLoginError=false
                        this.message='用户名只能包含字母或数字'
                        let timer=setTimeout(()=>{
                            this.isError=false
                            clearTimeout(timer)
                        },2000)                          
                    }
                }
            },
        }
    }
</script>

<style>
    .bili-mini-mask{
        display: flex;
        justify-content: center;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        font-size: 14px;
        background: rgba(0,0,0,.5);
        z-index: 10010;
        align-items: center;
    }

    .bili-mini-close-icon{
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;
    }

    .bili-mini-content-wp{
        box-sizing: border-box;
        width: 500px;
        height: 360px;
        background: #fff;
        border-radius: 8px;
        background-image: url(https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/22_open.4ea5f239.png),url(https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/33_open.f7d7f655.png);
        background-position: 0 100%,100% 100%;
        background-repeat: no-repeat,no-repeat;
        background-size: 14%;
        position: relative;
        display: flex;
        justify-content: center;
    }

    .bili-mini-content-wp .ivu-tabs-tab:nth-of-type(3){
        margin-right: 0 !important;
    }

    .bili-mini-content-wp .ivu-tabs-bar{
        border-bottom: none !important;
        margin-top: 25px !important;
    }

    .bili-mini-content-wp .ivu-tabs{
        overflow: visible !important;
        width: 300px;
    }

    .demo-login{
        width: 300px;
        margin: 0 auto !important;
    }
    .demo-auto-login{
        margin-bottom: 24px;
        text-align: left;
    }
    .demo-auto-login a{
        float: right;
    }

    .demo-register{
        width: 300px;
        margin: 0 auto !important;
    }
    .demo-register .ivu-poptip, .demo-register .ivu-poptip-rel {
        display: block;
    }
    .demo-register-tip{
        text-align: left;
    }
    .demo-register-tip-low{
        color: #ed4014;
    }
    .demo-register-tip-medium{
        color: #ff9900;
    }
    .demo-register-tip-strong{
        color: #19be6b;
    }
    .demo-register-tip-title{
        font-size: 14px;
    }
    .demo-register-tip-desc{
        white-space: initial;
        font-size: 14px;
        margin-top: 6px;
    }

    .bili-mini-content-wp .ivu-tabs .ivu-tabs-content-animated{
        transition: none;
    }

    .error{
        position: absolute;
        z-index: 1;
        background: rgba(0,0,0,.5);
        border-radius: 8px;
        color: white;
        padding: 5px;       
    }

    .login-error{
       bottom: 36px;
    }

    .register-error{
        bottom: 128px;
    }

    /* .ivu-message{
        z-index:1 !important;
    } */

    
</style>